<template>
  <div class="my-container">
    <div class="header" v-if="user">
      <!-- 头像 -->
      <div class="top">
        <van-image class="img" :src="userInfo.photo" alt="登录注册" round />
        <span class="text">{{ userInfo.name }}</span>
        <van-button type="default" size="mini" round class="btn" to="user/means"
          >编辑资料</van-button
        >
      </div>
      <!-- /头像 -->
      <!-- 动态关于粉丝 模块-->
      <div class="bottom">
        <div class="bottom-item">
          <span>{{ userInfo.art_count }}</span>
          <span>头条</span>
        </div>
        <div class="bottom-item">
          <span>{{ userInfo.fans_count }}</span>
          <span>粉丝</span>
        </div>
        <div class="bottom-item">
          <span>{{ userInfo.follow_count }}</span>
          <span>关注</span>
        </div>
        <div class="bottom-item">
          <span>{{ userInfo.like_count }}</span>
          <span>获赞</span>
        </div>
      </div>
      <!-- /动态关于粉丝 模块-->
    </div>
    <div class="header" v-else>
      <div class="login">
        <van-image
          class="img"
          src="https://dss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/562b325120efba096b3f9f593de058dd_88_88.png"
          alt="登录注册"
          round
        />
        <span class="text" @click="onLogin">登录 / 注册</span>
      </div>
    </div>
    <!-- Grid宫格 -->
    <van-grid :column-num="2" clickable>
      <van-grid-item @click="$router.push('/my/collection')">
        <i slot="icon" class="toutiao toutiao-shoucang"></i>
        <span slot="text" class="text2">收藏</span>
      </van-grid-item>
      <van-grid-item @click="$router.push('/my/history')">
        <i slot="icon" class="toutiao toutiao-lishi"></i>
        <span slot="text" class="text2">历史</span>
      </van-grid-item>
    </van-grid>
    <!-- /Grid宫格 -->
    <!-- 用户收藏、历史弹出层 -->

    <!-- 宫格导航 -->
    <div>
      <van-cell title="消息通知" class="cell1" is-link />
      <van-cell title="小慧同学" is-link to="/chat" />
      <van-cell v-if="user" @click="onBack" clickable title="退出登录" class="cell2 userlogin" />
    </div>
    <!-- /宫格导航 -->
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getUserInfo } from '@/api/Login.js'

export default {
  name: 'My',
  data() {
    return {
      // 用户信息
      userInfo: {},
      isCollectionShow: false
    }
  },
  methods: {
    // 跳转登录页
    onLogin() {
      this.$router.push('/login')
    },
    // 退出登陆提示
    onBack() {
      this.$dialog
        .confirm({
          title: '请确定是否退出登录 '
        })
        .then(() => {
          // 点击确认时，将store仓库清空，本地存储清空
          // 思想：调用store内的方法，传入一个空
          this.$store.commit('setUser', null)
        })
        .catch(() => {})
    },
    // 请求用户信息函数
    async oUserInfo() {
      const { data: res } = await getUserInfo()
      try {
        this.userInfo = res.data
      } catch (error) {
        console.log(error)
        this.$toast('用户信息获取失败,请稍后重试')
      }
    }
  },
  computed: {
    ...mapState(['user'])
  },
  created() {
    // 如果有用户数据,则调用请求用户信息函数
    if (this.user) {
      this.oUserInfo()
    }
  }
}
</script>

<style lang="less" scoped>
.my-container {
  .header {
    height: 350px;
    background: url('~@/assets/banner.png');
    background-size: cover;

    .login {
      height: 350px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .img {
      width: 110px;
      height: 110px;
      margin-bottom: 10px;
    }

    .text {
      color: #fff;
      font-size: 33px;
    }

    .top {
      height: 240px;
      display: flex;
      align-items: center;
      .img {
        margin: 0 30px;
      }
      .btn {
        width: 140px;
        height: 45px;
        margin-left: auto;
        margin-right: 30px;
        font-size: 23px;
      }
    }

    .bottom {
      display: flex;
      height: 110px;
      div {
        flex: 1;
        text-align: center;
        display: flex;
        flex-direction: column;
        span {
          color: #fff;
          &:nth-child(2),
          &:nth-child(1) {
            font-size: 26px;
          }
        }
      }
    }
  }
  .toutiao-shoucang,
  .toutiao-lishi {
    font-size: 35px;
    font-weight: 600;
    margin-bottom: 15px;
  }
  .toutiao-shoucang {
    color: rgb(233, 127, 137);
  }
  .toutiao-lishi {
    color: rgb(242, 184, 114);
  }
  .cell1,
  .cell2 {
    margin-top: 10px;
  }
  .userlogin {
    text-align: center;
    color: red;
  }
  .text2 {
    color: black;
    font-size: 30px;
  }
}
</style>
